<template>
    <div class="container">
        <el-select
            @change="selectChange"
            class="monthselect"
            v-model="monthSelect"
            placeholder=""
            size="small"
            style="width: 80px"
        >
            <el-option
                v-for="item in monthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <e-charts ref="chart" class="chart" :option="option" :theme="theme"></e-charts>
    </div>
</template>

<script setup>
import { ref, onMounted, provide, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()
    setInterval(function () {
        getData()
    }, 60 * 1000)
    nextTick(() => {
        emits('finish')
    })
})

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
    if (chart.value) {
        chart.value.resize()
    }
})

const emits = defineEmits(['finish'])

const selectChange = e => {
    console.log(e)
    getData()
}

const monthSelect = ref(0)

const monthOptions = ref([
    {
        label: '当月',
        value: 0,
    },
    {
        label: '前一月',
        value: 1,
    },
    {
        label: '前二月',
        value: 2,
    },
])

const chart = ref()
const theme = ref('dark')
provide('THEME_KEY', theme.value)

const option = ref({
    backgroundColor: 'rgba(0, 0, 0, 0)',
    title: {
        text: '油烟浓度分析',
        subtext: '',
        x: 'center',
        textStyle: {
            color: '#b8e6ff',
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'normal',
        },
    },
    grid: {
        bottom: 40,
        left: 50,
        right: 20,
    },
    //color: ['#1E9FFF', '#FFB800', '#FF5722'],
    color: ['#FF5722', '#FFB800'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                color: '#FFF',
                backgroundColor: '#1E9FFF',
            },
            lineStyle: {
                color: '#1E9FFF',
            },
            crossStyle: {
                color: '#1E9FFF',
            },
        },
        formatter: function (params) {
            //console.log(params)
            var result = ''
            result += params[0].axisValue + '日<br/>'
            result +=
                params[0].marker +
                ('最高浓度：' + (params[0].data == '-' ? '' : params[0].data + '') + '<br/>')
            result +=
                params[1].marker +
                ('平均浓度：' + (params[1].data == '-' ? '' : params[1].data + ''))
            return result
        },
    },
    legend: {
        show: false,
        left: 'center',
        top: '30',
        //data: ['0-10', '10-30', '30及以上'],
        data: ['最高浓度', '平均浓度'],
    },

    toolbox: {
        show: false,
        orient: 'vertical',
        right: '20',
        top: '20',
        feature: {
            //mark: { show: true },
            //dataView: { show: true, readOnly: true },
            //magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            //restore: { show: true },
            //saveAsImage: { show: true },
        },
    },
    xAxis: [
        {
            type: 'category',
            name: '',
            //axisTick: {
            //    alignWithLabel: true,
            //    show: true
            //},
            axisLabel: {
                show: true,
                // eslint-disable-next-line no-unused-vars
                formatter: function (value, index) {
                    return value + '日'
                },
            },
            data: [
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
                24, 25, 26, 27, 28, 29, 30, 31,
            ],
        },
    ],
    yAxis: [
        {
            name: '浓度(mg/m3)',
            type: 'value',
            position: 'left',
            axisLabel: {
                offset: 10,
                formatter: function (value) {
                    return `${value}`
                },
            },
        },
    ],
})

const getData = async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getoveranalysis?mid=${mid}&month=${monthSelect.value}`)
        if (res.status === 0) {
            if (res.data) {
                var data = res.data
                for (var i = 0; i < data.seriesData.length; i++) {
                    data.seriesData[i].data = data.seriesData[i].data.map(function (item) {
                        return item != -1 ? item : '-'
                    })
                }
                option.value.series = data.seriesData
            } else {
                ElMessage({
                    type: 'info',
                    message: '测点当前污染物信息',
                })
                //ElMessageBox.alert('测点无资料或未连接','提示',{confirmButtonText: '确定',});
            }
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .chart {
        width: 100%;
        height: 100%;
    }

    .monthselect {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
    }
}
</style>
